<template>
    <div >
          <h1>Upload 上传</h1>
          <el-row :gutter="20">
              <el-col :span="12" :offset="0">
                        <el-upload
                        class="upload-demo"
                        :action="uploadUrl"
                        :on-preview="handlePreview"
                        :on-exceed="handleExceed"
                        :on-success="handleSuccess" 
                        :before-upload="beforeUpload"
                        name="photo"
                         multiple
                        :limit="3"                        
                        :file-list="fileList">
                        <el-button size="small" type="primary">点击上传</el-button>
                        <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</div>
                        </el-upload>

              </el-col>
              <el-col :span="12" :offset="0">
                        <el-upload
                        class="avatar-uploader"
                        :action="uploadUrl"
                        :show-file-list="false"
                        :on-success="handleSuccess"
                        :before-upload="beforeUpload"
                         name="photo"
                        >
                        <img v-if="imageUrl" :src="imageUrl" class="avatar">
                        <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                        </el-upload>

              </el-col>
          </el-row>


          <el-row :gutter="20">
              <el-col :span="20" :offset="0">
              <el-upload
                :action="uploadUrl"
                list-type="picture-card"
                :on-preview="handlePreview2"
                name="photo"
               >
                <i class="el-icon-plus"></i>
                </el-upload>
                <el-dialog :visible.sync="dialogVisible">
                <img width="100%" :src="dialogImageUrl" alt="">
                </el-dialog>

              </el-col>
               
          </el-row>

          <el-row :gutter="20">
              <el-col :span="20" :offset="0">
                   <el-upload
                    class="upload-demo"
                    :action="uploadUrl"
                    :on-preview="handlePreview" 
                    :file-list="fileList"
                    list-type="picture">
                    <el-button size="small" type="primary">点击上传</el-button>
                    <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</div>
                    </el-upload>
            </el-col> 
          </el-row>
          
          
          
    </div>
</template>

<script>
export default {
    name: "",
    data() {
        return {
         uploadUrl:"http://localhost:9090/upload/upload",
         fileList:[],
         imageUrl:'',
         dialogVisible:false,
         dialogImageUrl:''

        }
    },
    components: {},
    methods: {
        handleSuccess(response, file, fileList){
            //例1
             file.url=this.$imgHost+response.data;
         
            //例2
             this.imageUrl=this.$imgHost+response.data;;
        },
        handlePreview(file){
            window.open(file.url);
        },
        handleExceed(files, fileList){
               this.$message.warning(`当前限制选择 3 个文件，本次选择了 ${files.length} 个文件，共选择了 ${files.length + fileList.length} 个文件`);
       },
        beforeUpload(file){
             const isJPG = file.type === 'image/jpeg';
                const isLt50k = file.size / 1024< 50;

                if (!isJPG) {
                this.$message.error('上传头像图片只能是 JPG 格式!');
                }
                if (!isLt50k) {
                this.$message.error('上传头像图片大小不能超过 50K!');
                }
                return isJPG && isLt50k;
        },
        handlePreview2(file) {
        this.dialogImageUrl = file.url;
        this.dialogVisible = true;
      }

    }
}
</script>

<style  scoped>
 .avatar-uploader-icon, .avatar {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
  }
  .avatar-uploader-icon:hover,  .avatar:hover {
    border-color: #409EFF;
  }
  .avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 178px;
    height: 178px;
    line-height: 178px;
    text-align: center;
  }
  .avatar {
    width: 178px;
    height: 178px;
    display: block;
  }
</style>
